<script setup lang="ts">
import {onMounted, ref} from 'vue';
import { showToast as Toast } from 'vant';
import {useRouter} from "vue-router";
import myAxios from "../plugins/myAxios.ts";


const searchText = ref('');
const onSearch = () => {
  myAxios.post('/post/search', {
    searchText: searchText.value,
    pageNum: 1,
    pageSize:20
  }).then(res => {
    list.value = res.data.data;
    console.log(res.data);
  })
      .catch(err => {
         console.log(err);
         Toast('搜索失败');
      })
}

onMounted(() => {
  myAxios.post('/post/search', {
    searchText: searchText.value,
    pageNum: 1,
    pageSize:20
  }).then(res => {
    list.value = res.data.data;
    console.log(res.data);
  })
      .catch(err => {
        console.log(err);
        Toast('搜索失败');
      })
})

const list = ref<{
  id: number;
  title: string;
  content: string;
  thumbNum: number;
  favourNum: number;
  userId: number;
  createTime: string;
  updateTime: string;
}[]>([]); // 使用 ref 创建响应式变量

interface Item {
  // interface 改成 type 也行
  id: number;
}

const postDetails = (item: Item) => {
  router.push({
    path: '/search/details',
    query: {
      id: item.id
    }
  })
}

const router = useRouter();
const onClickLeft = () => {
  router.push('/')
}
const onCancel = () => {}

</script>

<template>
  <img src="../assets/最终返回键.png" class="back-btn1" alt="返回" @click="onClickLeft" />

  <form action="/">
    <van-search
        v-model="searchText"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
    />
  </form>

  <van-card
      class="show-card"
      v-for="item in list"
      :title="item.title"
      :desc="item.content"
      @click="postDetails(item)"
  />


</template>

<style scoped>
.back-btn1 {
  position:fixed;
  float: left;
  top: -1px;
  width: 40px;
  height: 55px;
  z-index:2;
}
</style>